import styles from './ballCart.module.scss';
import { GiBasketballJersey } from 'react-icons/gi';
import { IPropsBall } from './ballCart.types';
import Button from '../button/button';
import { addToFavorite } from '../../store/balls/balls.slice';
import { useAppDispatch } from '../../store/hooks';

export const BallCart = ({ ball }: IPropsBall) => {
	console.log('ball', ball);
	const dispatch = useAppDispatch();
	return (
		<div className={styles.ball_cart} onClick={() => console.log(ball.id)}>
			<span
				onClick={(e) => {
					e.stopPropagation(),
					console.log('click'),
					dispatch(addToFavorite(ball.id));
				}}
				className={styles.form}
			>
				<GiBasketballJersey
					color={ball.favorites ? '#ffa500' : '#ff0000'}
					size={40}
				/>
			</span>
			<div>
				<div className={styles.img}>
					<img src={ball.image} width={300} />
				</div>
				<div className={styles.price}>
					<p>Цена {ball.price} р</p>
					<Button onClick={(e) => e.stopPropagation()} appearance="small">
            В корзину
					</Button>
				</div>
				<div className={styles.description}>
					<p className={styles.item}>Описание:</p>
					<p>{ball.title}</p>
				</div>
			</div>
		</div>
	);
};
